import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    Image,
} from 'react-native';

var Dimensions = require('Dimensions');

var { width, height } = Dimensions.get('window')

export default class TCScrollerView extends Component {

    constructor(props) {
        super(props)
        this.state = {
            currentPage: 0,
        }
    }
    static defaultProps = {
        duration: 3000,
    }
    componentDidMount() {

        { this.startTimer() };
    }

    render() {
        return (
            <View>
                <ScrollView
                    ref='scroll'
                    pagingEnabled={true}
                    horizontal={true}
                    onMomentumScrollEnd={(e) => this.onScrollAnimationEnd(e)}
                    onScrollBeginDrag={(e) => this.onScrollAnimationBeginDrag(e)}
                    onScrollEndDrag={(e) => this.onScrollAnimationEndDrag(e)}
                >
                    {this.scrollerImg()}
                </ScrollView>
                <View style={styles.pageStyle}>
                    {this.renderPage()}
                </View>
            </View>

        );

    }


    renderPage() {

        var style;
        var pageArr = [];

        for (var i = 0; i < 4; i++) {

            style = (i == this.state.currentPage) ? { color: 'red' } : { color: 'white' }
            pageArr.push(
                <Text key={i} style={[{ fontSize: 15 }, style]}> ● </Text>
            )

        }
        return pageArr;

    };

    onScrollAnimationEndDrag(e) {
        { this.startTimer() };
    };
    onScrollAnimationBeginDrag(e) {
        clearInterval(this.timer)
    };
    onScrollAnimationEnd(e) {

        var offSetX = e.nativeEvent.contentOffset.x;

        var curent = Math.floor(offSetX / width);

        this.setState({
            currentPage: curent,
        })
    }

    startTimer() {

        var Dimensions = require('Dimensions');
        var { width, height } = Dimensions.get('window');

        var a = 0;
        this.timer = setInterval(
            () => {
                a = this.state.currentPage;
                a++;

                if (a >= 4) {
                    a = 0;
                }
                this.setState({
                    currentPage: a
                }
                )
                this.refs.scroll.scrollTo({ x: width * a, y: 0, animated: true });
            },
            this.props.duration
        );

    };

    componentWillUnmount() {

        this.timer && clearTimeout(this.timer);
    }

    scrollerImg() {
        var imgs = []
        for (var i = 0; i < 4; i++) {
            var imgName = 'bannar' + (i + 1);
            imgs.push(
                <Image key={i} source={{ uri: imgName }}
                    style={{ width: width, height: (width * 113.0 / 376.0) }}
                />
            )
        }
        return imgs;

    }
}


const styles = StyleSheet.create({

    topScrollerViewStyle: {
        // width: width,
        // height: (width * 113.0 / 376.0),
        // backgroundColor: 'red',
        flexDirection: 'row',
    },
    pageStyle: {
        width: width,
        height: 25,
        backgroundColor: 'rgba(0,0,0,0)',
        flexDirection: 'row',
        alignItems: 'flex-end',
        justifyContent: 'center',
        marginTop:-25

    }
})
